<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
编辑订单信息
</title>
<style type ="text/css">
body {
    margin-left: 0px;
    margin-top: 0px;
}
ul{
    width:100%;
    display: -moz-box;
    display: -webkit-box;
    -moz-box-orient: vertical; 
    -webkit-box-orient:vertical;	
    margin:0px;
    padding:0px;
}
li{
    list-style:none;
}
ul li ul{
    display: -moz-box;
    display: -webkit-box;
    -moz-box-orient: horizontal; 
    -webkit-box-orient:horizontal;	
}
h1{
    font-size: 14px;
    font-weight: bold;
    color:white;
    background-color:#7088AD;
    text-align:left;
    padding-left:10px;
    display:block;
    width:100%;
    margin:0px;
}
li[id^=title]{
    font-size: 12px;
    color: #333333;
    background-color:#E6E6E6;
    text-align:right;
    padding-right:5px;
    width:110px;
}
li[id^=content]{
    height:22;
    background-color:#FAFAFA;
    text-align:left;
    padding-left:2px;
    width:210px;
}
span{
    color: #ff0000;
}
input{
    width: 95%;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #426C7C;
    border-right-color: #CCCCCC;
    border-bottom-color: #CCCCCC;
    border-left-color: #426C7C;
    border:1px solid #0066cc;
    height: 18px;
}
input:read-only{
    background-color:yellow;
}
input:-moz-read-only{
    background-color:yellow;
}
input#tbxNum{
    text-align:right;
}
input#tbxPrice{
    text-align:right;
}
input#tbxMoney{
    text-align:right;
}
div{
    text-align:right;
}
div#buttonDiv{
    width:100%;
}
input[type="button"],input[type="submit"]{
    font-size: 12px;
    width: 68px;
    height: 20px;	
    cursor: hand;
    border:none;
    font-family:宋体;
    background-color:White;
    background-image:  url(images/but_bg.gif);
    color: white;
}
</style>
<script>
var data;
var db = openDatabase('MyData', '', 'test Database', 102400);
function window_onload()
{
    var str = sessionStorage.getItem("saveData");    
    data =  JSON.parse(str);
    document.getElementById("tbxCode").value=data.Code;
    document.getElementById("tbxDate").value=data.Date;
    document.getElementById("tbxGoodsCode").value=data.GoodsCode;      
    document.getElementById("tbxBrandName").value=data.BrandName;
    document.getElementById("tbxNum").value=data.Num;
    document.getElementById("tbxPrice").value=data.Price;
    document.getElementById("tbxMoney").value=data.Money;
    document.getElementById("tbxPersonName").value=data.PersonName;
    document.getElementById("tbxEmail").value=data.Email;
    document.getElementById("tbxCode").setAttribute("readonly",true);
}
function tbxNum_onblur()
{
    var num,price;
    num=parseInt(document.getElementById("tbxNum").value);
    price=parseFloat(document.getElementById("tbxPrice").value);
    if (isNaN(num*price))
    {
        document.getElementById("tbxNum").value="0";
        document.getElementById("tbxMoney").value="0";
    }
    else
        document.getElementById("tbxMoney").value= num * price;
}

function tbxPrice_onblur()
{
    var num,price;
    num=parseInt(document.getElementById("tbxNum").value);
    price=parseFloat(document.getElementById("tbxPrice").value);
    
    if (isNaN(num*price))
    {
        document.getElementById("tbxPrice").value="0";
        document.getElementById("tbxMoney").value="0";
    }
    else
        document.getElementById("tbxMoney").value= num * price;
}
function btnUpdate_onclick()
{
    data.Code=document.getElementById("tbxCode").value;
    data.Date=document.getElementById("tbxDate").value;
    data.GoodsCode=document.getElementById("tbxGoodsCode").value;
    data.BrandName=document.getElementById("tbxBrandName").value;
    data.Num=document.getElementById("tbxNum").value;
    data.Price=document.getElementById("tbxPrice").value;
    data.PersonName=document.getElementById("tbxPersonName").value;
    data.Email=document.getElementById("tbxEmail").value;
    db.transaction(function(tx) 
    {  
        tx.executeSql('update orders set date=?,goodscode=?,brandName=?,num=?,price=?,personName=?,email=? where code=?',[data.Date,data.GoodsCode,data.BrandName,data.Num,data.Price,data.PersonName,data.Email,data.Code],  
        function(tx, rs) 
        {  
            alert("成功修改数据!");
        },  
        function(tx, error) 
        {  
            alert(error.source + "::" + error.message);  
        });  
    });   
}
function btnDelete_onclick()
{
    data.Code=document.getElementById("tbxCode").value;
    db.transaction(function(tx) 
    {  
        tx.executeSql('delete from orders where code=?',[data.Code],  
        function(tx, rs) 
        {  
            alert("成功删除数据!");
            btnReturn_onclick();
        },  
        function(tx, error) 
        {  
            alert(error.source + "::" + error.message);  
        });  
    });
}
function btnClear_onclick()
{
    document.getElementById("tbxDate").value="";
    document.getElementById("tbxGoodsCode").value="";      
    document.getElementById("tbxBrandName").value="";
    document.getElementById("tbxNum").value="0";
    document.getElementById("tbxPrice").value="0";
    document.getElementById("tbxMoney").value="0";
    document.getElementById("tbxPersonName").value="";
    document.getElementById("tbxEmail").value="";
}
function btnReturn_onclick()
{
    sessionStorage.removeItem("saveData");
    window.location=setLocation();
}
function setLocation()
{
    var location=String(window.location);
    location=location.replace("edit","search");
    return location;
}
</script>
</head>
<body onload="window_onload()">
<section>
<header id="div_head_title_big">
<h1>编辑订单信息</h1>
</header>
<form id="form1" >
<ul>
    <li>
        <ul>
    	    <li id="title_1"><span>*</span><label for="tbxCode">订单编号</label></li>
	    <li id="content_1"><input type="text" id="tbxCode" name="tbxCode" maxlength="8"  autofocus/></li>
	    <li id="title_2"><span>*</span><label for="tbxDate">订单日期</label></li>
	    <li id="content_2"><input type="date" id="tbxDate" name="tbxDate" maxlength="10"  required/></li>
	    <li id="title_3"><span>*</span><label for="tbxGoodsCode">商品编号</label></li>
	    <li id="content_3"><input type="text"  id="tbxGoodsCode" name="tbxGoodsCode" maxlength="12"  placeholder="必须输入商品编号"  required/></li>
	</ul>
    </li>
    <li>
	<ul>
	    <li id="title_4"><label for="tbxBrandName">商&nbsp;&nbsp;&nbsp;&nbsp;标</label></li>
	    <li id="content_4"><input  type="text" id="tbxBrandName" name="tbxBrandName"  maxlength="50"  /></li>
	    <li id="title_5"><label for="tbxNum">数&nbsp;&nbsp;&nbsp;&nbsp;量</label></li>
	    <li id="content_5"><input type="number" id="tbxNum" name="tbxNum" maxlength="6" value="0" placeholder="必须输入一个整数值"    required onblur="tbxNum_onblur()" /></li>
	    <li id="title_6"><label for="tbxPrice">单&nbsp;&nbsp;&nbsp;&nbsp;价</label></li>
	    <li id="content_6"><input type="text" id="tbxPrice" name="tbxPrice" maxlength="6" value="0" placeholder="必须输入一个有效的单价"  required  onblur="tbxPrice_onblur()"/></li>
	</ul>
    </li>
    <li>
	<ul>
	    <li id="title_7"><label for="tbxMoney">金&nbsp;&nbsp;&nbsp;&nbsp;额</label></li>
	    <li id="content_7"><input  type="text" id="tbxMoney" name="tbxMoney" readonly="readonly"  value="0" /></li>
	    <li id="title_8"><label for="tbxPersonName">负&nbsp;责&nbsp;人</label></li>
	    <li id="content_8"><input type="text" id="tbxPersonName" name="tbxPersonName" maxlength="20"/></li>
	    <li id="title_9"><label for="tbxEmail">负责人Email</label></li>
	    <li id="content_9"><input type="email" id="tbxEmail" name="tbxEmail" maxlength="20" placeholder="请输入一个有效的邮件地址"/></li>
	</ul>
    </li>
</ul>
<div id="buttonDiv">
    <input type="submit" name="btnUpdate" id="btnUpdate" value="修改" formaction="javascript:btnUpdate_onclick();"/>
    <input type="button" name="btnDelete" id="btnDelete" value="删除" onclick="btnDelete_onclick();" />
    <input type="button" name="btnClear" id="btnClear" value="清除"   onclick="btnClear_onclick();" />  
    <input type="button" name="btnReturn" id="btnReturn" value="返回"   onclick="btnReturn_onclick();" />  
</div>
</form> 
<section>
</body>
</html>